<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性案例</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ person }}</p>
        <p>{{ msg }}</p>
        <p>{{something}}</p>

    </div>

    <script>
        var dataFromOutside = '这是来自实例之外的信息。'
        var app = new Vue({
            el: '#app',
            data: {
                person: '尤雨溪',
                msg: 'hello Vue!'
            },
            watch: {
                // 当msg 发生变化时，执行我们定义的方法。
                msg: function (newval, oldval) {
                    console.log('新值:' + newval)
                    console.log('旧值:' + oldval)
                }
            },
            computed: {
                something: function () {
                    return this.person + this.msg + dataFromOutside
                }
            }
        })
    </script>
</body>

</html>
